keyframes 定義關鍵影格的各自狀態，不同關鍵影格組成動態變化，但我們在定義keyframes時，使用的是from / to 或0%~100%之間，少了一個相當重要的元素「時間」，在CSS的世界中，是在要使用的網頁元件上時，提供此動態的時間數值。

因此，最單純的animation的使用方式就是放入好朋友keyframes的名字，和不可或缺的時間：

.my-div{
animation: my-animation 3s;
}

@keyframes my-animation{
  0%{
      opacity:0;
    }
  100%{
      opacity:1;
    }
}

剛剛內容也可以用子屬性animation-name和animation-duration改寫：

.my-div{
animation-name: my-animation;
animation-duration: 3s;
}

備註：若要同時使用多個定義好的keyframes，使用逗點隔開即可同時使用。

animation屬性包含了多個子屬性(sub-properties)，除了name和duration外，還有以下項目可以依照需求進行設定：

• animation-timing-function：定義變化的速率，預設值為linear(平均速率變化)，另外可以使用step、cubic-bezier和定義好的ease/ease-in/ease-out/ease-in-out。
• animation-delay：定義網頁元件讀取完畢後，動畫開始的間隔時間，用於產生延遲效果。
• animation-iteration-count：設定動畫的重複次數，使用「infinite」即可達成重複播放。
• animation-direction：定義動畫播放完畢後是否需反向播放。共有normal、reverse、alternate、alternate-reverse四個值可以設定。
• animation-fill-mode：定義元素在動畫播放外的狀態。共有none、forwards、backwards、both四個值可以設定。
• animation-play-state：控制動畫的播放狀態。有 pause 和 running 兩個值，預設為running。

除了使用子屬性外，也可全部寫在 animation 中：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

備註：name 和 duration 為必要值。